<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>实时监控</title>
  <script src="./ezuikit.js"></script>
  <script src="/static/js/jquery-2.1.1.js"></script>
</head>

<body>
  <div className="demo">
    <div id="video-container" style="width:1000px;">
    </div>
    <div class="zoom">
      <div class='button' id="near"></div>
      <div class='button' id="far"></div>
    </div>
  </div>

  <script>
    //获取token
    var playr;

    var accessToken = "";
    var data = {appKey:"5043d5b7dc5d48888e5d404c85891305",appSecret:"07740ce063fa80134b2727d04e9c1cea"};
    //获取token
    $.ajax({
        type:'post',
        url:"https://open.ys7.com/api/lapp/token/get",
        data:data,
        dataType:'JSON',
        success:function (res) {
            accessToken = res.data.accessToken
            playr = new EZUIKit.EZUIKitPlayer({
                id: 'video-container', // 视频容器ID
                accessToken:accessToken,
                url:getQueryVariable('url'),
                template: 'security', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
                plugin: ['talk'],                       // 加载插件，talk-对讲
                width:1000,
                height: 800,
            });
        },
        error:function (res) {
        }
    });


    //获取URL传参
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }


  </script>
</body>

</html>